<template>
<div>
  <Login v-if="$route.path==='/login'" />
  <a-layout v-else id="components-layout-demo-fixed-sider">
    <a-layout-sider :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }">
      <img class="logo" src="./assets/logo2.png" alt="">
      <a-menu theme="dark" mode="inline" :selectedKeys="selectedKeys">
        <a-menu-item key="1">
          <router-link to="/">
            <HomeOutlined />
            <span class="nav-text">首页</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="2" v-if="$root.isAdmin">
          <router-link to="/add">
            <FormOutlined />
            <span class="nav-text">添加/修改</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="3" v-if="$root.isAdmin">
          <router-link to="/user">
            <TeamOutlined />
            <span class="nav-text">用户管理</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="4">
          <router-link to="/record">
            <BarChartOutlined />
            <span class="nav-text">借阅记录</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="5">
          <router-link to="/setting">
            <UserOutlined />
            <span class="nav-text">个人中心</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="6">
          <router-link to="/comment">
            <CommentOutlined />
            <span class="nav-text">留言板</span>
          </router-link>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout :style="{ marginLeft: '200px' }">
      <a-layout-header style="text-align:right;" :style="{ zIndex: 9, position: 'fixed',width: 'calc(100% - 200px)' }">
        <img style="height:50px;border-radius:50%;" :src="$http.baseURL+'/public/pic/'+$root.avatar" alt="">
        welcome {{$root.nickname}}
        <a-button @click="logout" type="link" style="color:#fff;font-weight: bold;">退出登录</a-button>
      </a-layout-header>
      <a-layout-content :style="{ margin: '64px 0 0', overflow: 'initial',background: '#fff',padding: '0 16px' }">
        <router-view/>
      </a-layout-content>
      <a-layout-footer :style="{ textAlign: 'center' }">
        Ant Design ©2018 Created by Ant UED
      </a-layout-footer>
    </a-layout>
  </a-layout>
  </div>
</template>

<script>
import Login from './views/Login'
export default {
  data() {
    return {
      isAdmin:localStorage.type==='0',
      nickname: localStorage.nickname||'',
      userId: localStorage.userId||'',
      avatar: localStorage.avatar||'',
      bookData: null
    };
  },
  components:{
    Login
  },
  computed:{
    selectedKeys(){
      var list = ['','/','/add','/user','/record','/setting','/comment']
      return [list.indexOf(this.$route.path)+'']
    }
  },
  methods: {
    logout(){
      this.$router.push('/login')
      localStorage.clear()
    },
  },
};
</script>
<style>
body .ant-layout-header{
  background-image:url("./assets/logo.png");
  background-position: center;
  color: #fff;
}
.search-box{
  margin: 20px 0;
}
body .search-input{
  margin-right: 20px;
  width: 200px;
}
#components-layout-demo-fixed-sider .logo {
  margin: 16px 0;
  width: 100%;
}
</style>